<template>
  <div>
    <img src="" alt="" @click="clickLeft" class="leftimgDiv">
      <ul class="Img_url">
        <li v-for="(item, index) of imgUrlList" v-bind:key="index" class="Img_li" :style="imgStyle">
          <img :class="index === imgActiveIndex ? 'img_activeBorder' : '' " :src="item.url" style="width:80px;height:50px;" alt="">
        </li>
      </ul>
    <img src="" alt="" @click="clickRight" class="rightimgDiv">
  </div>
</template>
<script>
import images from '@/assets/images/img.png'
import images1 from '@/assets/summary/five.png'
export default{
  name: 'BaseSwiper',
  props: {
    speed: Number,
    direction: String
  },
  data () {
    return {
      imgActiveIndex: 0, // 当前移动图片的索引值
      imgDistance: 0, // 移动的距离
      allDistance: 0, // 总移动距离
      images,
      images1,
      imgUrlList: [
        { url: images },
        { url: images },
        { url: images },
        { url: images },
        { url: images },
        { url: images1 }
      ],
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      theDirection: this.direction,
      imgBox: ''
    }
  },
  computed: {
    imgStyle () {
      return {
        transform: `translate3d(${this.imgDistance}px, 0, 0)` // 计算移动的距离（x,y,z）
      }
    }
  },
  methods: {
    resetImg () {
      // this.$refs.imgDiv.style.zoom = '100%'
      // var left = document.querySelector('.left')
    //   var img = document.querySelector('.img')
    //   console.log(img, '3323232')
    //   img.style.left = 0 + 'px'
    //   img.style.top = 0 + 'px'
    },
    clickLeft () {
      console.log(this.imgActiveIndex)
      if (this.imgActiveIndex > 0) {
        this.imgActiveIndex-- // 索引值减1
      }
      if (this.imgActiveIndex >= 3) {
        var index = 0
        const temp = window.setInterval(() => {
          if (index < 48) {
            this.imgDistance += 2
            index++
          } else {
            window.clearInterval(temp)
          }
        }, 10)
      }
      this.resetImg()
    },
    clickRight () {
      console.log(this.imgActiveIndex, this.imgUrlList.length)
      if (this.imgActiveIndex < this.imgUrlList.length - 1) {
        this.imgActiveIndex++
        console.log(this.imgActiveIndex, '当前下标')
        if (this.imgActiveIndex >= 4) {
          this.allDistance = -96 * (this.imgActiveIndex - 3)
          var index = 0
          const temp = window.setInterval(() => {
            if (index < 48) {
              this.imgDistance -= 2 // 每次向右移动的距离
              index++
            } else {
              window.clearInterval(temp)
            }
          }, 10)
        }
      } else if (this.imgActiveIndex === this.imgUrlList.length - 1) { // 到达最后一张图片，再点击跳转回第一张
        this.imgActiveIndex = 0
        // this.mainImgUrl = this.imgUrlList[0].url
        let index = 0
        const temp = window.setInterval(() => { // 利用定时器实现图片左右移动的动画效果
          if (index < Math.abs(this.allDistance / 2)) { // 取绝对值再除
            this.imgDistance += 2 // 每次向左移动的距离 (移动总距离为48*this.imgDistance)
            index++
          } else {
            window.clearInterval(temp) // 移动完清除定时器
          }
        }, 1)
      }
      this.resetImg()
    }
  },
  mounted () {
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>
<style scoped lang='less'>
  .leftimgDiv {
    width: 30px;
    height: 30px;
    background: red;
    float: left;
  }
  .rightimgDiv {
    width: 30px;
    height: 30px;
    background: green;
    float: right;
    float: left;
    margin-left: 20px;
  }
  .left_div {
    float: left;
    width: 560px;
    margin-left: 20px;
    margin-top: 50px;
  }
  .Img_url {
    position: relative;
    display: flex;
    left: 20px;
    right: 20px;
    width: 392px;
    height: 50px;
    overflow: hidden;
    list-style: none;
    float: left;
  }
  .Img_li {
    float: left;
    margin: 0 8px;
    cursor: pointer;
  }
  .img_activeBorder {
    border: 3px solid  green;
  }
  .left {
    position: relative;
    width: 545px;
    height: 360px;
    background-color: #fff;
    overflow: hidden;
    border: 1px solid #ddd;
  }
  .img_wz {
    float: right;
    font-size: 12px;
    margin-right: 15px;
    margin-top:5px;
    color: #555;
  }
  .img {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 923px;
    max-height: 460px;
    cursor: move;
  }
</style>
